<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="main" style="width: 600px;height: 400px"></div>
<script src="../echarts/dist/echarts.min.js"></script>
</body>
<script>
    var mychart=echarts.init(document.getElementById('main'));
    var base= +new Date(1968,9,3);
    var oneDay=24*3600*1000;
    var date=[];
    var data=[Math.random()*300];
    for(var i=1;i<20000;i++){
        var now=new Date(base+=oneDay);
        date.push([now.getFullYear(),now.getMonth()+1,now.getDate()].join('-'));
        data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
    };
    option={
        tooltip:{
            trigger:'axis',
            positon:function(pt){
                return [pt[0],'10%']
            }
        },
        title:{
            left:'center',
            text:'大数据量折线图'
        },
        legend:{
            top:'bottom',
            data:['意向']
        },
        toolbox:{
            show:true,
            feature:{
                dataView:{show:true,readOnly:false},
                magicType:{show:true,type:['line','bar','stack','tiled']},
                restore:{show:true},
                saveAsImage:{show:true}
            }
        },
        xAxis:{
            type:'category',
            boundaryGap:false,
            data:date
        },
        yAxis:{
            type:'value',
            boundaryGap:[0,'100%']
        },
        dataZoom:[{
            type:'inside',
            start:0,
            end:10},{
            start:0,
            end:10
        }],
        series:[{
            name:'模拟数据',
            type:'line',
            smooth:true,
            symbol:'none',
            sampling:'average',
            itemStyle:{
                nomal:{
                    color:'rgb(255,70,131)'
                }
            },
            areaStyle:{
                normal:{
                    color:new echarts.graphic.LinearGradient(0,0,0,1,[{
                        offset:0,
                        color:'rgb(255,158,68)'},{
                        offset:1,
                        color:'rgb(255,70,131)'
                    }])
                }
            },
            data:data
        }]
    }
    mychart.setOption(option)
</script>
</html>